<template>
  <div class="login-container">
    <div class="mask" @click="$router.push('/home')"></div>
    <div class="login" v-show="!isQrCode">
      <span class="qr" @click="QRLogin">扫码登录</span>
      <h2>HoShiZora</h2>
      <div class="from">
        <input type="text" class="username" placeholder="email" v-model="username">
        <div class="code-box">
          <input type="password" class="password" placeholder="密码" v-model="password">
          <el-button v-if="false" type="primary" class="btn-code">{{ codeTitle }}</el-button>
        </div>
        <button class="btn-login" :class="{ active: isClick && isActive, unactive: !isClick && isActive }"
          @click="userLogin" @mousedown="isClick = true; isActive = true" @mouseup="loginBtnUp">登
          录</button>
      </div>
      <router-link to="/home/reguser" class="gotoregister">立即注册</router-link>
    </div>

    <!-- 二维码登录 -->
    <div class="qrcode" v-show="isQrCode">
      <span class="el-icon-arrow-left" @click="isQrCode = false"></span>
      <h3>扫描二维码登录</h3>
      <div class="qr-img">
        <img v-if="timer" :src="qrUrl" />
        <div v-if="isQrMask" class="qr-mask">
          <span class="el-icon-refresh-right" @click="getQrCodeKey()"></span>
        </div>
      </div>
      <p>请使用网易云APP扫码登录</p>
    </div>
  </div>
</template>

<script>
import axios from '@/request/request'
export default {
  data() {
    return {
      username: '',
      password: '',
      codeTitle: '验证码',
      isQrCode: false,
      qrUrl: '',
      timer: null,
      isQrMask: false,
      isClick: false,
      isActive: true
    }
  },
  watch: {
    isQrCode(newValue) {
      if (!newValue) {
        clearInterval(this.timer)
      }
    }
  },
  methods: {
    loginBtnUp() {
      this.isClick = false
      setTimeout(() => {
        this.isClick = true
        this.isActive = false
      }, 300)
    },
    // 根据手机号，获取验证码
    // async getCode() {
    //   if(this.username.trim() == '' || this.username.length != 11) return this.$message.warning('请输入正确的手机号')
    // const {data:res} = await axios({
    //   method:'get',
    //   url:`/captcha/sent?phone=${this.username}`,
    //   withCredentials: true
    // })
    //  if(res.code == 200) {
    //    this.codeTiltle = '已发送'
    //    setTimeout(() => {
    //      this.codeTiltle = '验证码'
    //    },5000)
    //  }
    // },
    // 登录
    async userLogin() {
      if (!this.username.trim() || !this.password.trim()) return this.$message.error('请输入正确的登录信息')
      const res = await this.$store.dispatch('user/emailUserLogin', { email: this.username, password: this.password })
      if (res == 'success') {
        this.$router.push('/home')
      }
    },
    QRLogin() {
      this.isQrCode = true
      this.getQrCodeKey()
    },
    // 生成二维码key
    async getQrCodeKey() {
      const timestamp = +new Date()
      const { data: res } = await axios.get(`/login/qr/key?timestamp=${timestamp}`)
      if (res.code == 200) {
        this.getBase64Img(res.data.unikey)
      }
    },
    // 获取二维码base64图片
    async getBase64Img(key) {
      const timestamp = +new Date()
      const { data: res } = await axios.get(`/login/qr/create?key=${key}&timestamp=${timestamp}&qrimg=1`)
      if (res.code == 200) {
        this.qrUrl = res.data.qrimg
        this.isQrMask = false
        this.timer = setInterval(() => {
          this.checkCodeState(key)
        }, 1000)
      }
    },
    // 查询二维码扫码状态
    async checkCodeState(key) {
      const timestamp = +new Date()
      const { data: res } = await axios.get(`/login/qr/check?key=${key}&timestamp=${timestamp}`)
      if (res.code == 803) {
        clearInterval(this.timer)
        this.timer = null
        const res1 = await this.$store.dispatch('user/getUserInfo')
        if (res1 == 'success') {
          this.$router.push('/home')
        }
      } else if (res.code == 800) {
        this.$message.warning('二维码已过期')
        clearInterval(this.timer)
        this.timer = null
        this.isQrMask = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  width: 23vw;
  height: 21vw;
  border-radius: 6px;
  background-color: white;

  .gotoregister {
    font-size: 1vw;
    margin-top: 1.5vw;
  }

  .qr {
    position: absolute;
    top: 2vw;
    right: 2vw;
    cursor: default;
    font-size: 0.8vw;
    color: #962ed6;

    &:hover {
      color: #9d00ff;
    }
  }

  a {
    display: inline-block;
    text-decoration: none;
    color: rgb(150, 46, 214);
    margin-top: 25px;


  }

  .from {
    height: 12vw;
    margin-top: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .code-box {
      position: relative;

      .btn-code {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #962ed6;
        border: none;
      }

    }

    .username {
      width: 20vw;
      height: 2.5vw;
      border-radius: 5px;
      outline: none;
      border: 1px solid #962ed6;
      text-indent: 15px;
      font-size: 20px;
      line-height: 2.5vw;

      &::placeholder {
        text-indent: 1em;
        color: rgb(153, 153, 153);
        font-size: 14px;
      }
    }

    .password {
      width: 20vw;
      height: 2.5vw;
      border-radius: 5px;
      outline: none;
      border: 1px solid #962ed6;
      text-indent: 15px;
      font-size: 20px;
      line-height: 2.5vw;

      &::placeholder {
        text-indent: 1em;
        color: rgb(153, 153, 153);
        font-size: 14px;
      }
    }

    .btn-login {
      width: 20vw;
      height: 3vw;
      border: 0;
      border-radius: 1.5vw;
      background-color: rgb(120, 22, 180);
      color: #fff;
      font-size: 1.1vw;
      transition: all 0.3s;

      &:hover {
        background-color: rgb(170, 65, 235);
      }

      &.active {
        background-color: rgb(120, 22, 180);
      }

      &.unactive {
        background-color: rgb(170, 65, 235);
      }
    }
  }

  h2 {
    position: absolute;
    top: 0;
    left: 1vw;
    color: rgb(127, 70, 224);
    transform: rotateY(10deg);
    font-size: 2vw;
  }
}

.qrcode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: space-evenly;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  width: 23vw;
  height: 21vw;
  border-radius: 6px;
  background-color: white;

  .el-icon-arrow-left {
    position: absolute;
    top: 0.5vw;
    left: 0.5vw;
    font-size: 1.5vw;
  }

  h3 {
    margin: 0;
    margin-top: 0.5vw;
    font-size: 1.5vw;
  }

  p {
    font-size: 0.8vw;
    margin: 0;
  }

  .qr-img {
    position: relative;
    width: 11vw;
    height: 11vw;
    margin: 1.8vw 0;

    img {
      width: 100%;
      height: 100%;
    }

    .qr-mask {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);

      .el-icon-refresh-right {
        color: #fff;
        font-size: 2vw;
      }
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100vw;
  height: 100vw;
  background-color: rgba(0, 0, 0, 0.7);
}
</style>